window.onload = function() {
    var mySwiper = new Swiper(".swiper-container", {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 2500, //事件间隔
            stopOnLastSlide: false, //
            disableOnInteraction: false,
            pauseOnMouseEnter: true, //输入移入 停止
        },
    });


    let exit = document.querySelector('#exit');
    exit.addEventListener('click', function() {
        localStorage.removeItem('username');
        setTimeout(() => {
            location.href = "../html/login.html";
        }, 1000);
    })
}

// 购物车列表展示
async function loadCartList() {
    let cartListAPI = "http://jx.xuzhixiang.top/ap/api/cart-list.php";
    let uid = localStorage.getItem("id");
    let params = {
        id: uid
    };
    console.log(params);
    let {
        data
    } = await axios.get(cartListAPI, {
        params
    });
    console.log(data);
    let cartArr = data.data;
    console.log(cartArr);

    //将对象数组 映射为 字符串 数组
    let resArr = cartArr.map(
        (v) => `
            <li>
                <p class="cart-list-con">
                <span>选择:</span>
                <input type="checkbox" name="" id="" class="singleCK" onchange="singleCkChange(this)"/>
                </p>
                <img src="${v.pimg}" alt="" />
                <p class="cart-list-text">${v.pname}</p>
                <p class="ppricee">￥<span class="pprice">${v.pprice}</span></p>
                <p> 
                   <span class="cart-list-p">数量：</span><input class="pnum" type="number" value="${v.pnum}" min="0" onchange="pnumChange(${v.pid},this)"/><br>
                </p>
                <button onclick="delCartClick(${v.pid},this)">删除</button>
            </li>

        `
    );
    console.log(resArr);
    document.querySelector("#cart-list").innerHTML = resArr.join("");
}
loadCartList();

// 删除事件
async function delCartClick(pid, btn) {
    let uid = localStorage.getItem("id");
    //  let pid =
    let params = {
        uid,
        pid
    };
    console.log(params);
    let delCartAPI = "http://jx.xuzhixiang.top/ap/api/cart-delete.php";
    let {
        data
    } = await axios.get(delCartAPI, {
        params
    });
    console.log(data);
    console.log(this);
    console.log(btn); //点击的按钮
    btn.parentNode.remove();
}
// 修改功能
async function pnumChange(pid, ipt) {
    console.log(pid);
    console.log(ipt.value);
    let updateCartAPI =
        "http://jx.xuzhixiang.top/ap/api/cart-update-num.php";
    let uid = localStorage.getItem("id");
    let pnum = ipt.value;
    let params = {
        pid,
        uid,
        pnum
    };
    console.log(params);
    let {
        data
    } = await axios.get(updateCartAPI, {
        params
    });
    console.log(data);
}

//  全选的事件
function allCkChange(allCk) {
    console.log(11);
    console.log(allCk);
    console.log(allCk.checked);
    //  获取所以的单选ck
    let singleCKs = document.querySelectorAll(".singleCK");
    // 单选按钮的状态跟全选按的状态一致
    singleCKs.forEach((v) => (v.checked = allCk.checked));
}

// 单选的事件
function singleCkChange(ck) {
    // /  获取所以的单选ck
    let singleCKs = document.querySelectorAll(".singleCK");
    console.log(singleCKs);
    // 伪数组转为真数组
    let arr = [...singleCKs];
    console.log(arr);
    //arr 中元素的checked 属性 是否都为true
    let flag = arr.every((v) => v.checked == true);
    console.log(flag);

    // 改变 全选的状态
    document.querySelector("#allCk").checked = flag;

    countPrice();
}

// 计算总价的函数
function countPrice() {
    //找到 所有被选中的 单选按钮
    let singleCKs = document.querySelectorAll(".singleCK");
    let arr = [...singleCKs];
    // 过滤出来 所有 被选中 的单选按钮
    let resArr = arr.filter((v) => v.checked == true);
    console.log(resArr); // 单选按钮->>获取 一条 信息的  商品的单价 和 数量

    let count = 0;
    let countNum = 0;
    resArr.forEach((ck) => {
        console.log(ck); // 被选中 的单选按钮
        console.log(ck.parentNode.parentNode); //li
        let pnumIpt = ck.parentNode.parentNode.querySelector(".pnum");
        let ppriceP = ck.parentNode.parentNode.querySelector(".pprice");
        console.log(pnumIpt.value);
        console.log(ppriceP.innerHTML);

        //数量和单价相乘 累加
        count = count + pnumIpt.value * ppriceP.innerHTML;

        countNum += parseInt(pnumIpt.value);
    });
    console.log(count);

    document.querySelector("#allPrice").innerHTML = count;
    document.querySelector("#allPnum").innerHTML = countNum;

}

window.onload = function() {

    //index 用户展示
    if (localStorage.getItem('username')) {
        let yhm = document.querySelector('.wrapper-right-sp');
        console.log(yhm);
        yhm.innerHTML = "您好," + localStorage.getItem("username") + '<a href = "login.html" id = "exit" >退出</a>';
    }

    var mySwiper = new Swiper(".swiper-container", {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 2500, //事件间隔
            stopOnLastSlide: false, //
            disableOnInteraction: false,
            pauseOnMouseEnter: true, //输入移入 停止
        },
    });
}